function ProductNav() {
    // 获取导航栏中的 a 标签
    let nav_a = document.getElementsByClassName("Navigation_nav_a");
    // 获取到要显示的 div
    let productdetail = document.getElementById("NavigationProduct");

    // 遍历 nav_a 集合中的元素并添加鼠标悬停事件监听
    for (let i = 0; i < nav_a.length; i++) {
        nav_a[i].addEventListener('mouseover', function () {
            // 显示 NavigationProduct
            productdetail.style.height = '230px';
        });

        // 添加鼠标移出事件监听
        nav_a[i].addEventListener('mouseout', function () {
            // 隐藏 NavigationProduct
            productdetail.style.height = '0';
        });
    }
}
function lunb() {
    let carouselImages = document.getElementById('carousel-images');
    let carouselIndicators = document.getElementById('carousel-indicators');
    let prevArrow = document.getElementById('prev-arrow');
    let nextArrow = document.getElementById('next-arrow');
    let images = carouselImages.getElementsByTagName('img');
    let currentIndex = 0;
    let autoPlayInterval;

    function updateIndicators() {
        let indicators = carouselIndicators.getElementsByTagName('div');
        for (let i = 0; i < indicators.length; i++) {
            indicators[i].classList.remove('active');
        }
        carouselIndicators.children[currentIndex].classList.add('active');
    }

    function showSlide(index) {
        // 移除所有图片的 active 类
        for (let i = 0; i < images.length; i++) {
            images[i].classList.remove('active');
        }
        // 为当前索引的图片添加 active 类
        images[index].classList.add('active');
        updateIndicators();
    }

    function nextSlide() {
        currentIndex = (currentIndex + 1) % images.length;
        showSlide(currentIndex);
    }

    function prevSlide() {
        currentIndex = (currentIndex - 1 + images.length) % images.length;
        showSlide(currentIndex);
    }

    prevArrow.addEventListener('click', prevSlide);
    nextArrow.addEventListener('click', nextSlide);

    carouselIndicators.addEventListener('click', function (e) {
        if (e.target.tagName === 'DIV') {
            let index = parseInt(e.target.dataset.index);
            showSlide(index);
        }
    });

    function startAutoPlay() {
        autoPlayInterval = setInterval(nextSlide, 3000);
    }

    function stopAutoPlay() {
        clearInterval(autoPlayInterval);
    }

    carouselImages.addEventListener('mouseenter', stopAutoPlay);
    carouselImages.addEventListener('mouseleave', startAutoPlay);

    startAutoPlay();
}
function ce() {
    // 获取元素及其对应的图片元素
    let iphone = document.getElementById('iphone');
    let grzx = document.getElementById('grzx');
    let shfw = document.getElementById('shfw');
    let rgkf = document.getElementById('rgkf');
    let gwc = document.getElementById('gwc');
    let topElem = document.getElementById('top');

    let iphone_img = document.getElementById('iphone_img');
    let grzx_img = document.getElementById('grzx_img');
    let shfw_img = document.getElementById('shfw_img');
    let rgkf_img = document.getElementById('rgkf_img');
    let gwc_img = document.getElementById('gwc_img');
    let top_img = document.getElementById('top_img');

    // 为 iphone 元素添加事件监听
    iphone.addEventListener('mousemove', function () {
        iphone_img.innerHTML = '<img src="images/10007.png" alt="">';
    });
    iphone.addEventListener('mouseout', function () {
        iphone_img.innerHTML = '<img src="images/iphone.png" alt="">';
    });

    // 为 grzx 元素添加事件监听
    grzx.addEventListener('mousemove', function () {
        grzx_img.innerHTML = '<img src="images/10001.png" alt="">';
    });
    grzx.addEventListener('mouseout', function () {
        grzx_img.innerHTML = '<img src="images/10008.png" alt="">';
    });

    // 为 shfw 元素添加事件监听
    shfw.addEventListener('mousemove', function () {
        shfw_img.innerHTML = '<img src="images/10003.png" alt="">';
    });
    shfw.addEventListener('mouseout', function () {
        shfw_img.innerHTML = '<img src="images/10002.png" alt="">';
    });

    // 为 rgkf 元素添加事件监听
    rgkf.addEventListener('mousemove', function () {
        rgkf_img.innerHTML = '<img src="images/10001.png" alt="">';
    });
    rgkf.addEventListener('mouseout', function () {
        rgkf_img.innerHTML = '<img src="images/10008.png" alt="">';
    });

    // 为 gwc 元素添加事件监听
    gwc.addEventListener('mousemove', function () {
        gwc_img.innerHTML = '<img src="images/10006.png" alt="">';
    });
    gwc.addEventListener('mouseout', function () {
        gwc_img.innerHTML = '<img src="images/10005.png" alt="">';
    });

    // 为 top 元素添加事件监听
    topElem.addEventListener('mousemove', function () {
        top_img.innerHTML = '<img src="images/totop_hover.png" alt="">';
    });
    topElem.addEventListener('mouseout', function () {
        top_img.innerHTML = '<img src="images/totop.png" alt="">';
    });

}
function fhtop() {
    // 回到顶部的函数
    function scrollToTop() {
        // 计算每次滚动的距离
        let scrollStep = -window.scrollY / (500 / 15);
        // 创建一个定时器，每隔 15 毫秒滚动一次
        let scrollInterval = setInterval(function () {
            if (window.scrollY !== 0) {
                window.scrollBy(0, scrollStep);
            } else {
                clearInterval(scrollInterval);
            }
        }, 15);
    }

    // 获取超链接元素
    let topButton = document.getElementById('top');


    // 为回到顶部的超链接添加点击事件
    topButton.addEventListener('click', function (event) {
        event.preventDefault(); // 阻止默认的超链接跳转行为
        scrollToTop();
    });


}
function checkProduct() {
    // 获取所有版本和颜色的分组
    let versionGroups = document.querySelectorAll('.version');

    // 遍历每个分组
    versionGroups.forEach(group => {
        // 获取当前分组中的所有 li 元素
        let listItems = group.querySelectorAll('li');

        // 为当前分组中的每个 li 元素添加点击事件监听器
        listItems.forEach(item => {
            item.addEventListener('click', () => {
                // 移除当前分组中所有 li 元素及其内部 a 元素的 selected 类
                listItems.forEach(li => {
                    li.classList.remove('selected');
                    let link = li.querySelector('a');
                    if (link) {
                        link.classList.remove('selected');
                    }
                });

                // 为当前点击的 li 元素及其内部 a 元素添加 selected 类
                item.classList.add('selected');
                let currentLink = item.querySelector('a');
                if (currentLink) {
                    currentLink.classList.add('selected');
                }
            });
        });

        // 默认让当前分组的第一个 li 元素及其内部 a 元素呈现选中样式
        if (listItems.length > 0) {
            let firstLi = listItems[0];
            firstLi.classList.add('selected');
            let firstLink = firstLi.querySelector('a');
            if (firstLink) {
                firstLink.classList.add('selected');
            }
        }
    });
}
function checkfuwu() {
    let checkDivs = document.querySelectorAll('.checkdiv');

    checkDivs.forEach(div => {
        let radio = div.querySelector('input[type="radio"]');
        let wasChecked = false;

        div.addEventListener('click', () => {
            if (wasChecked) {
                radio.checked = false;
                div.classList.remove('selected');
            } else {
                let category = div.dataset.category;
                let sameCategoryDivs = document.querySelectorAll(`.checkdiv[data-category="${category}"]`);
                sameCategoryDivs.forEach(sameDiv => {
                    let sameRadio = sameDiv.querySelector('input[type="radio"]');
                    sameRadio.checked = false;
                    sameDiv.classList.remove('selected');
                });
                radio.checked = true;
                div.classList.add('selected');
            }
            wasChecked = radio.checked;
        });
    });
}
lunb();
ProductNav();
ce();
fhtop();
checkProduct(); checkfuwu();
